<template>
  <NuxtLayout name="content">
    <div class="search">
      <div class="condition">
        <n-space vertical>
          <n-space>
            <div class="category-list">
              <div class="label">分类</div>
              <div class="flex flex-wrap">
                <div v-for="category in categoryList" :key="category.id" :class="[
                  'searchButton',
                  selecteCategories === category.id &&
                  'bg-blue-950 text-white',
                ]" @click="onCategoryClick(category.id)">
                  {{ category.name }}
                </div>
              </div>
            </div>
          </n-space>
          <n-space>
            <div class="tag-list">
              <div class="label">标签</div>
              <div class="flex flex-wrap">
                <div v-for="tag in tagsList" :key="tag.id" :class="[
                  'searchButton',
                  selecteTag.includes(tag.id) && 'bg-blue-950 text-white',
                ]" @click="onTagClick(tag.id)">
                  {{ tag.name }}
                </div>
              </div>
            </div>
          </n-space>
        </n-space>
      </div>
      <n-space class="postlist" vertical justify="center">
        <template v-for="(item, index) in blockPostList" :key="index">
          <Block :width="pageInfo.isMini ? 100 : 144" :height="pageInfo.isMini ? 100 : 144" :tags="item.tags"
            :title="item.title" :summary="item.summary" :image="item.image" :time="item.time" :id="item.id" />
        </template>
        <n-pagination v-model:page="pageNum" :page-size="pageSize" @update:page="onUpdatePage" size="large"
          :item-count="itemCount" />
      </n-space>
    </div>
  </NuxtLayout>
</template>

<script setup lang="ts">
import {
  NSpace,
  NPagination,
  NRadioButton,
  NRadioGroup,
  NCheckboxGroup,
  NCheckbox,
} from "naive-ui";
import {
  findSearch as apiPostFindSearch,
  StatusPost,
  type PostQueryFind,
} from "../../api/post";
import { findAll as apiFindAllTags, type TagsShow } from "../../api/tag";
import {
  findAll as apiFindAllCategories,
  type CategoryShow,
} from "~/api/category";
import pageInfoStore from "~/stores/pageInfo"
const pageInfo = pageInfoStore();
useHead({
  title: "文章搜索", //网站标题
});
interface blockPost {
  id: string;
  title: string;
  summary: string;
  image: string;
  tags: { id: Number; name: string }[];
  time: Date;
}
const blockPostList = ref<blockPost[]>();
const tagsList = ref<TagsShow[]>([]);
const selecteTag = ref<number[]>([]);
const categoryList = ref<CategoryShow[]>([]);
const selecteCategories = ref<number>();
const pageNum = ref(1);
const itemCount = ref(0);
const pageSize = ref(10);
const keyword = ref("");
onBeforeRouteUpdate((to: any) => {
  keyword.value = to.query.keyword;
  getPostList();
});
const getPostList = async () => {
  const res = await apiPostFindSearch({
    status: StatusPost.Publish,
    keyword: keyword.value,
    pageNum: pageNum.value,
    category: selecteCategories.value,
    tags: selecteTag.value,
  });
  if (res?.data) {
    const list: blockPost[] = [];
    itemCount.value = res.data.count;
    res.data.list.forEach((item) => {
      list.push({
        id: item.id,
        title: item.title,
        summary: item.summary,
        image: item.coverUrl,
        tags: item.tags.map((tag) => {
          return { id: tag.id, name: tag.name };
        }),
        time: new Date(item.createTime),
      });
    });
    blockPostList.value = list;
  }
};
const onUpdatePage = (page: number) => {
  getPostList();
};

const onTagClick = (id: number) => {
  const oldLen = selecteTag.value.length;
  selecteTag.value = selecteTag.value.filter((tag) => tag !== id);
  const newLen = selecteTag.value.length;

  if (oldLen === newLen) {
    selecteTag.value.push(id);
  }
  getPostList();
};
const getTags = async () => {
  const res = await apiFindAllTags();
  if (res?.data) tagsList.value = res.data;
};

const onCategoryClick = (id: number) => {
  if (selecteCategories.value === id) {
    selecteCategories.value = undefined;
  } else {
    selecteCategories.value = id;
  }
  getPostList();
};
const getcategories = async () => {
  const res = await apiFindAllCategories();
  if (res?.data) categoryList.value = res.data;
};
const route = useRoute();
if (route.query.tagId) selecteTag.value.push(+route.query.tagId);
await Promise.all([
  getPostList(),
  getcategories(),
  getTags(),
])
</script>
<style lang="scss" scoped>
.condition {

  .category-list,
  .tag-list {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;

    .label {
      min-width: 30px;
    }
  }
}

.postlist {
  margin-top: 20px;
}

.searchButton {
  margin: 0px 5px;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: rgb(116, 116, 247);
    color: white;
  }
}

.bg-blue-950 {
  background-color: blue;
}

.text-white {
  color: white;
}
</style>
